<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>呼吸轮播</title>
    <style type="text/css">
      body {
        font-family: "宋体";
      }
      .banner {
        width: 992px;
        height: 420px;
        margin: 100px auto 0;
        position: relative;
      }
      .imgList {
        width: 992px;
        height: 420px;
        position: relative;
      }
      .imgList li {
        width: 992px;
        height: 420px;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }
      .btnList {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
      .btnList li {
        width: 30px;
        height: 20px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        margin-right: 10px;
        float: left;
        text-align: center;
        line-height: 20px;
        border: 1px solid #ccc;
        cursor: pointer;
      }
      .btnList li.current {
        background: rgba(0, 0, 0, 0.65);
      }
      .leftBtn,
      .rightBtn {
        width: 41px;
        height: 69px;
        position: absolute;
        top: 50%;
        margin-top: -35px;
        background: no-repeat center center
          rgba(0, 0, 0, 0.65);
        display: none;
        cursor: pointer;
      }
      .leftBtn {
        left: 0;
      }
      .rightBtn {
        right: 0;
      }
      .banner:hover .leftBtn,
      .banner:hover .rightBtn {
        display: block;
      }
    </style>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="banner">
      <ul class="imgList">
        <li style="display:block;">
          <a href="javascript:;"
            ><img
              src="http://via.placeholder.com/992x420"
              height="420"
              width="992"
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img
              src="http://via.placeholder.com/992x420/000000"
              height="420"
              width="992"
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img
              src="http://via.placeholder.com/992x420/0000FF"
              height="420"
              width="992"
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img
              src="http://via.placeholder.com/992x420/FFFFFF"
              height="420"
              width="992"
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img
              src="http://via.placeholder.com/992x420/008000"
              height="420"
              width="992"
          /></a>
        </li>
      </ul>
      <ol class="btnList">  <!-- ol 顺序列表 -->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
      </ol>
      <div class="leftBtn"></div>
      <div class="rightBtn"></div>
    </div>
    <script>
      //定义一个变量，用来模拟不断改变的下标
      var num = 0;
      var nextFn = function() {
        //让上一张淡出
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeOut(1000);
        num++;
        if (num > 4) {
          num = 0;
        }
        //让下一个角标增加current...
        $(".btnList li")
          .eq(num)
          .addClass("current")
          .siblings("li")
          .removeClass("current");
        //让下一张淡入
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeIn(1000);
      };

      var prevFn = function() {
        //让上一张淡出
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeOut(1000);
        num--;
        if (num < 0) {
          num = 4;
        }
        //让上一个角标增加current...
        $(".btnList li")
          .eq(num)
          .addClass("current")
          .siblings("li")
          .removeClass("current");
        //让下一张淡入
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeIn(1000);
      };

      $(".rightBtn").click(nextFn);
      $(".leftBtn").click(prevFn);
      $(".btnList li").click(function(event) {
        //num未修改前代表上一张
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeOut(1000);
        num = $(this).index();
        //num修改后代表下一张
        //让下一个角标增加current...
        $(".btnList li")
          .eq(num)
          .addClass("current")
          .siblings("li")
          .removeClass("current");
        //让下一张淡入
        $(".imgList li")
          .eq(num)
          .stop()
          .fadeIn(1000);
      });
    </script>
  </body>
</html>
